<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="'iSCSI Wizard' | translate"
  [loading]="isLoading()"
></ix-modal-header>

<mat-card class="card">
  <form [formGroup]="form" (keydown.enter)="$event.preventDefault()" (submit)="onSubmit()">
    <mat-vertical-stepper #stepper>
      <ix-use-ix-icons-in-stepper></ix-use-ix-icons-in-stepper>

      <mat-step #matStepInstance>
        <ng-template matStepLabel>{{ 'Target' | translate }}</ng-template>
        <ix-target-wizard-step [form]="form.controls.target"></ix-target-wizard-step>
        <div class="step-buttons">
          <button
            mat-button
            matStepperNext
            color="primary"
            type="button"
            ixTest="next"
            [disabled]="form.controls.target.invalid"
          >{{ 'Next' | translate }}</button>
        </div>
      </mat-step>

      <mat-step #matStepInstance>
        <ng-template matStepLabel>{{ 'Extent' | translate }}</ng-template>
        <ix-extent-wizard-step [form]="form.controls.extent"></ix-extent-wizard-step>
        <div class="step-buttons">
          <button
            mat-button
            matStepperPrevious
            color="accent"
            type="button"
            ixTest="back"
          >{{ 'Back' | translate }}</button>
          @if (isNewTarget) {
            <button
              mat-button
              matStepperNext
              color="primary"
              type="button"
              ixTest="next"
              [disabled]="form.controls.extent.invalid"
            >{{ 'Next' | translate }}</button>
          } @else {
            <button
              mat-button
              color="primary"
              type="submit"
              ixTest="save"
              [disabled]="form.invalid || isLoading()"
            >{{ 'Save' | translate }}</button>
          }
        </div>
      </mat-step>

      @if (isNewTarget) {
        <mat-step #matStepInstance>
          <ng-template matStepLabel>{{ 'Protocol Options' | translate }}</ng-template>
          <ix-protocol-options-wizard-step
            [form]="form.controls.options"
            [isFibreChannelMode]="isFibreChannelMode"
          ></ix-protocol-options-wizard-step>
          <div class="step-buttons">
            <button
              mat-button
              matStepperPrevious
              color="accent"
              type="button"
              ixTest="back"
            >{{ 'Back' | translate }}</button>
            <button
              *ixRequiresRoles="requiredRoles"
              mat-button
              color="primary"
              type="submit"
              ixTest="save"
              [disabled]="form.invalid || isLoading()"
            >{{ 'Save' | translate }}</button>
          </div>
        </mat-step>
      }
    </mat-vertical-stepper>
  </form>
</mat-card>
